<%@ include file="../common/IncludeTop.jsp"%>

<style>
	.okTips{
		color: #A8D8CD;
	}
	.errorTips{
		color: #ff6060;
	}
</style>

<script>
			$(function (){
				$('#password').on('blur',function (){
					$.ajax({
						type : "GET",
						url : "passwordExist?password="+this.value+"&username="+$('#un').text(),
						success : function (data){
							if(data.msg ==='Exist'){
								$('#passwordTips').attr("class","errorTips").text('Invalid');
							}else if(data.msg ==='Not Exist'){
								$('#passwordTips').attr("class","okTips").text('Available');
							}
						}

					});
				});
			});
</script>

${sessionScope.messageAccount}

<div id="Catalog">
	<form action="saveAccount" method="post">

		<h3>User Information</h3>

		<table>
			<tr>
				<td>User ID:</td>
				<td id="un">${sessionScope.account.username}</td>
			</tr>
			<tr>
				<td>New password:</td>
				<td>
					<input type="text" name="password" id="password" autofocus="autofocus" />
					<span id="passwordTips"></span>
				</td>
			</tr>
			<tr>
				<td>Repeat password:</td>
				<td><input type="text" name="repeatedPassword" /></td>
			</tr>
		</table>
		<%@ include file="IncludeAccountFields.jsp"%>

		<input type="submit" name="editAccount" value="Save Account Information"/>
	</form>

	<a href="viewListOrder?username=${sessionScope.account.username}">My Orders</a>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>
